{% extends 'core/base.html' %}
{% block content %}
<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <h2>用户登录</h2>
            <p class="auth-subtitle">登录后体验更多功能</p>
        </div>

        <form method="post" class="auth-form">
            {% csrf_token %}

            <div class="form-fields">
                {{ form.as_p }}
            </div>

            <div class="form-actions">
                <button type="submit" class="auth-button">登录</button>
            </div>
        </form>

        <div class="auth-footer">
            <p>没有账号？<a href="{% url 'register' %}">立即注册</a></p>
        </div>
    </div>
</div>

<style>
    .auth-container {
        max-width: 450px;
        margin: 2rem auto;
    }

    .auth-card {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        padding: 2rem;
    }

    .auth-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .auth-header h2 {
        margin-bottom: 0.5rem;
        display: block;
        border-bottom: none;
    }

    .auth-subtitle {
        color: var(--text-light);
    }

    .auth-form {
        margin-bottom: 1.5rem;
    }

    .form-fields {
        margin-bottom: 1.5rem;
    }

    .form-fields p {
        margin-bottom: 1.2rem;
    }

    .form-fields label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .form-fields input {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--border);
        border-radius: 5px;
        font-size: 1rem;
        transition: border-color 0.3s;
    }

    .form-fields input:focus {
        border-color: var(--primary);
        outline: none;
    }

    .form-actions {
        margin-top: 2rem;
    }

    .auth-button {
        width: 100%;
        padding: 12px;
        font-size: 1.1rem;
        background-color: var(--primary);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .auth-button:hover {
        background-color: var(--primary-dark);
    }

    .auth-footer {
        text-align: center;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
    }

    .auth-footer a {
        color: var(--primary);
        font-weight: 500;
    }
</style>
{% endblock %}